#include("../../comm/ListHead.html")
<style>
    *[lay-href], *[lay-tips], *[index-event]{ cursor:pointer; }
</style>
<script language="JavaScript" src="../../static/js/echarts.min.js?v=1.349"></script>
<div class="layui-fluid layui-anim layui-anim-scale">
    <!--第一行-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3 ">
            <div class="layui-card box box4">
                <div class="layui-card-header">
                    今日UV
                </div>
                <div class="layui-card-body " style="height:150px;">
                    <div id="box_1" style="width: 100%;height:100%;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card box ">
                <div class="layui-card-body " style="height:192px;">
                    <div id="box_5" style="width: 100%;height:100%;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    测试标题
                </div>
                <div class="layui-card-body " style="height:150px;">
                    <div id="box_6" style="width: 100%;height:240px;top:-50px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    测试标题
                </div>
                <div class="layui-card-body" style="height:150px;">
                    <div id="box_7" style="width: 100%;height:200px;"></div>
                </div>
            </div>
        </div>
    </div>
    <!--第二行-->
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md8">
            <div class="layui-card box box4">
                <div class="layui-card-header">
                    今日UV
                </div>
                <div class="layui-card-body " style="height:400px">
                    <div id="box_4" style="width: 100%;height:100%;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card box box4">
                <div class="layui-card-header">
                    今日UV
                </div>
                <div class="layui-card-body " style="height:400px">
                    <div id="box_2" style="width: 100%;height:100%;"></div>
                </div>
            </div>
        </div>
    </div>

    <!--第三行-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6 " id="list_1">
        </div>
        <div class="layui-col-md6" id="list_2">
        </div>
    </div>
</div>
#[[

]]#
<script language="JavaScript">

    layui.use(['laytpl', 'carousel', 'index2', 'element', 'myTable'], function () {
        var laytpl = layui.laytpl, $ = layui.jquery;

        echarts.init(document.getElementById('box_1')).setOption({
            title: {text: '', subtext: '', left: 'center'},
            tooltip: {trigger: 'item'},
            legend: {show: false, orient: 'vertical', left: 'left'},
            series: [{
                name: '数来源', type: 'pie', radius: '80%', data: [{value: 1048, name: '搜索引擎'}, {value: 735, name: '链接'}, {value: 580, name: '邮箱'}, {value: 484, name: '外部广告'}, {value: 300, name: '视频广告'}],
                emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
            }]
        });

        echarts.init(document.getElementById('box_2')).setOption({
            title: {show: false, text: '', subtext: '', left: 'center'},
            tooltip: {how: false, trigger: 'item'},
            legend: {show: false, orient: 'vertical', left: 'left'},
            series: [{
                name: '数来源', type: 'pie', radius: '80%', data: [{value: 1048, name: '搜索引擎'}, {value: 735, name: '链接'}, {value: 580, name: '邮箱'}, {value: 484, name: '外部广告'}, {value: 300, name: '视频广告'}],
                emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
            }]
        });

        echarts.init(document.getElementById('box_4')).setOption({
            legend: {show: false},
            tooltip: {show: false},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    {product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7},
                    {product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1},
                    {product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5},
                    {product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        });

        echarts.init(document.getElementById('box_5')).setOption({
            title: {show: false, text: '', subtext: '', left: 'center'},
            tooltip: {how: false, trigger: 'item'},
            legend: {show: false, orient: 'vertical', left: 'left'},
            series: [{
                name: '数来源', type: 'pie', radius: '80%', data: [{value: 1048, name: '搜索引擎'}, {value: 735, name: '链接'}, {value: 580, name: '邮箱'}, {value: 484, name: '外部广告'}, {value: 300, name: '视频广告'}],
                emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
            }]
        });

        echarts.init(document.getElementById('box_6')).setOption({
            legend: {show: false},
            tooltip: {show: false},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    {product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7},
                    {product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1},
                    {product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5},
                    {product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        });

        echarts.init(document.getElementById('box_7')).setOption({
            xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
            yAxis: {type: 'value'},
            series: [
                {data: [120, 200, 150, 80, 70, 110, 130], type: 'bar'}
            ]
        });

    });

</script>
#include("../../comm/Foot.html")